<template>
    <view class="uc-wrap uc-classify-classify">
        <view class="classify-box">
            <view class="classify-left">
                <view v-for="(item,index) in classifyList" :key="index" class="item" :class="item.checked?'on':''" @click="btnChooseA(index)">
                    {{item.name}}
                </view>
            </view>
            <view class="classify-right">
                <view v-for="(item,index) in classifyList" :key="index">
                    <view class="list" v-if="item.checked">
                        <navigator class="item" url="" hover-class="none" v-for="(item2,index2) in item.children" :key="index2">
                            <view class="img"><image src="@/static/images/classify-img.png" mode="aspectFill"></image></view>
                            <view class="txt">{{item2.name}}</view>
                        </navigator>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>
<script setup>
    import { ref } from 'vue'
    const classifyList = ref([
        {
            name: '极米商用投影',
            checked: true,
            children: [{ name: '极米商用投影', checked: true, }, { name: '极米商用投影2', checked: false, }, { name: '极米商用投影2', checked: false, }, { name: '极米商用投影2', checked: false, }, ],
                }, {
            name: '青柠周边产品',
            checked: false,
            children: [{ name: '青柠周边产品', checked: false, }, { name: '青柠周边产品2', checked: false, }, ],
                }, {
            name: '青柠投影幕布',
            checked: false,
            children: [{ name: '青柠投影幕布', checked: false, }, { name: '青柠投影幕布2', checked: false, }, ],
                }, {
            name: '青柠微影服务',
            checked: false,
            children: [{ name: '青柠微影服务', checked: false, }, { name: '青柠微影服务2', checked: false, }, ],
                }, {
            name: '全部',
            checked: false,
            children: [{ name: '全部', checked: false, }, { name: '全部2', checked: false, }, ],
                },
                ])
    const btnChooseA = (idx1) => {
        classifyList.value.forEach((item, index) => {
            if (index == idx1) {
                item.checked = true
            } else {
                item.checked = false
            }
        })
    }
    const btnChooseB = (idx1, idx2) => {
        let str1, str2;
        classifyList.value.forEach((item, index) => {
            if (index == idx1) {
                str1 = item.name
                item.children.forEach((item2, index2) => {
                    if (index2 == idx2) {
                        item2.checked = true
                        str2 = item2.name
                    } else {
                        item2.checked = false
                    }
                })
            }
        })
    }
</script>